<template>
  <div class="cinemas-search">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入影院名称"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
  </div>
  <div class="cinemas-search-title">离你最近</div>
  <div class="cinemas-search-list"></div>
</template>
<script>
export default {
  name: "CinemasSearch",
};
</script>
<script setup>
import { Toast } from "vant";
import { ref } from "vue";
const value = ref("");
const onSearch = (val) => Toast(val);
const onCancel = () => Toast("取消");
</script>
<style lang="scss" scoped>
.cinemas-search:after {
  content: "";
  display: block;
  border-bottom: 1px solid #ededed;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}
.cinemas-search-title {
  font-size: 13px;
  line-height: 13px;
  color: #bdc0c5;
  margin: 18px;
}
</style>
